<template>
  <!-- #ifdef H5 -->
    <mtitles  title="预约结果" bgColor="#56BF7A" :delta='3' color="#fff" isBack></mtitles>
    <!-- #endif -->
	<view class="container" :class="{min:windowHeight>0&&windowHeight<700}">
		<view class="topSec padding-lr-sm p_rlt" @touchmove.stop.prevent="stopPrevent">
			<view class="mapImgBox p_rlt">
				<image class="bgimg" src="https://cdn-static.yekjx.com/subscribe/images/mapbg1.png" mode="aspectFill"></image>
				<view class="mtitle text-center text-white text-acenter" @click="downFn">
					房间导航图
				</view>
				<view class="mapMain p_rlt">
					<view class="img_vbox">
						<image class="mpimg" src="https://cdn-static.yekjx.com/subscribe/images/fantest1.png" mode="aspectFill"></image>
					</view>
					<view class="text-white text-center floor_box" :class="{'margin-top-sm':type !== '2'}">
						<view v-for="(item,index) in 2" :key="index" :class="{act:floorClass==index}" @click.stop="tapFloor(index)" class="d_ib floorItm margin-right-sm text-acenter">
							{{index+1}}楼
						</view>
					</view>
				</view>
				
			</view>
		</view>
    
    <slideContent :initTop="initTop" :disable="allowSlide" :minTop="minTopHei" :maxTop="maxTopH" @change="changeSlide" @moving="slideAct"
      zIndex="10" ref="sildContRef" class="p_rlt posire">
      <template v-slot:contents>
          <view class="botSec p_rlt">
          	<view class="bs_top padding-top-sm text-white intlh">
          		<view class="flex align-center fk-w">
                <image class="ico_img" src="../../../static/group_02.png" mode="aspectFill"></image>
          			<view class="flex-sub flex justify-center flex-direction padding-left">
          				<view class="flex align-center">
          					<view class="flex text-left text-df textbold400">
                      {{type == '0' || type == '2'? '预约成功' : '付款后预约成功'}}
          						
          						<view class="d_ib p_rlt fdis " v-if="type == '0' || type == '2'">
          							<view class="bs_ldis org text-acenter text-xs">
          								过时自动取消
          							</view>
          						</view>
          					</view>
          				</view>
          				<view class="text-xs margin-top-xs">
          					预约时间：2023/7/1 14:30
          				</view>
          			</view>
          			<view class="margin-left-sm  padding-top-xs flex flex-direction align-center">
          				<view class="flex align-center bsprice">
          					<view class="d_ib">
                      <block v-if="type !== '2'"><text class="text-lg">￥</text><text class="text-bold text-llllg">1000</text></block>
                      <block v-if="type =='2'"><text class="text-bold text-llllg">1000</text></block>
          					</view>
          					<view class="d_ib p_rlt fdis">
          						<view class="bs_ldis gry text-acenter text-xs" v-if="type!=='2'">
          							小程序价
          						</view>
          					</view>
          				</view>
          				<view class="padding-left margin-top-xxs flex text-sm">
          				    <block v-if="type !== '0' && type!=='2'">
                        <text class="padding-right-sm">支付剩余</text>
                        <view class="countdown flex">
                           <view class="tiem-box">{{ hours }}</view>:
                           <view class="tiem-box ">{{ minutes }}</view>:
                           <view class="tiem-box">{{ seconds }}</view>
                        </view>
                      </block>
                      <block v-else>
                        {{type == '2' ? "服务号" : '消费金额' }}
                      </block>
          				</view>
          			</view>
          		</view>
          	</view>
          	<view class="bs_list" :class="{fpa:type == 'fpa' || type == '0' || type == '2' }">
              <view class="" :class="{'top-con':type !== 'fpa' && type!=='0' && type!=='2'}">
                <view class="padding-top padding-left-lg padding-bottom-xs flex align-center" :class="{'justify-between' : type == '2'}">
                	<view>房间安排</view>
                  <view class="a-right padding-right-lg flex justify-center flex-direction align-center" v-if="type == '2'">
                    <view><text class="text-sm">￥</text><text class="text-bold text-xll">798</text></view>
                    <view class="text-c9 text-xs">消费金额</view>
                    <view class="xcxPic">小程序价</view>
                  </view>
                </view>
                <scroll-view scroll-y="true" class="bscr_box" :class="{'bs-height' : type == '1'}">
                	<view class="touch padding-left-lg padding-right-sm padding-top-xs">
                		<view v-for="(item,index) in room" :key="index" class="margin-bottom-sm bslItem padding-lr-sm padding-top-xs padding-bottom-xs">
                			<view class="flex align-center">
                				<view class="flex align-center">
                					<text class="text-c3 text-xl">{{item.text}}房</text>
                					<view class="d_ib  text-xxs bsflr text-acenter text-ngreen">
                						3楼
                					</view>
                          <view class="d_ib  text-xxs bsflr text-acenter text-ngreen">
                          	VIP
                          </view>
                				</view>
                				<view class="flex-sub text-end padding-left-xs text-sm">
                          <view class="bs_status text-white text-sm text-acenter" :style="{backgroundColor:index == 1 ? 'FF9700'  : '#56BF7A'}">
                          	<text class="bsyuan d_ib margin-right-xs" ></text>
                          	{{index == 1 ? '准备中' : '准备好'}}
                          </view>
                				</view>
                			</view>
                			<view class="flex align-center padding-top-xs room-hei" style="position: relative;">
                        <view class="flex-sub text-c6 text-sm ">
                          <text class="text-c9">部分</text><text class="text-c6">{{item.time}}</text><text class="text-c9">开始</text>
                        </view>
                        <view class="li-height" :style="{height: item.show ? '52rpx'  : '0'}">
                          <view class="d_ib  text-c3 text-df">
                          	足疗 <text class="text-xxs">(1人)</text>
                          </view>
                          <view class="d_ib margin-left text-c3 text-df">
                          	推拿 <text class="text-xxs">(1人)</text>
                          </view>
                          <view class="d_ib margin-left text-c3 text-df">
                          	艾灸 <text class="text-xxs">(1人)</text>
                          </view>
                        </view>
                				<view class="posicuIconunfold" @click="showFn(item)"><text class="cuIcon-right rotateStyleNew"  :class="{'active': item.show}"></text></view>
                			</view>
                		</view>
                	</view>
                </scroll-view>
                <view class="bs_btnv padding-left-lg padding-right-sm" v-if="type == 'fpa' || type == '0' || type == '2'">
                	<view class="flex">
                		<!-- <view class="btn_l text-ngreen text-acenter bg-white" @click="tapwGetUp">
                			待会上点
                		</view>
                		<view class="btn_r text-white text-acenter" @click="tapGetUp">
                			呼叫技师上点
                		</view> -->
                    
                    <view class="flex justify-between wd100 " v-if="type == '2'">
                      <view class="btn_l text-ngreen text-acenter bg-white">待会上点</view>
                      <view class="call_r text-white text-acenter" >呼叫技师上点</view>
                    </view>
                    
                    <view class="flex justify-between wd100 " v-if="type == '0'">
                      <view class="btn_l text-ngreen text-acenter bg-white">取消订单</view>
                      <view class="call_r text-white text-acenter" >呼叫技师上点</view>
                    </view>
                    
                    <view class="btn_r text-white text-acenter btn_w " v-if="type == 'fpa'">
                      <button class="mdbtn" v-if="type == 'fpa'" open-type="share">发给微信好友代付</button>
                      <!-- <button class="mdbtn" v-if="type == 0" >知道了，自己去房间</button> -->
                    </view>
                	</view>
                </view>
              </view>
          		
          		
              <!-- 付款方式 -->
              <view class="fkfs-con margin-top-sm" v-if="type !== 'fpa' && type !== '0' && type !== '2'">
                <view class="fktitle text-c6 text-df">付款方式</view>
              
                <scroll-view class="scrollheight" :scroll-y="false" >
                  <view class="fk-middle bg-white bg-shadou padding-sm">
                    <view class="zj-ul flex" v-for="(item,index) in paytype" :key="index" @click.stop="selcePay(item,paytype)" :class="{'align-center':!pricebelow}">
                      <view class="zj-left flex" >
                        <view>
                          <text class="text-xll margin-right-xs"
                            :class="item.select?'cuIcon-roundcheckfill':'cuIcon-round'"></text>
                        </view>
                      </view>
                      <view class="zj-right" style="flex: 1;">
                        <block v-if="pricebelow">
                          <view class="flex justify-between align-center">
                            <view class="padding-left-xs flex-sub">
                              <view class="flex align-end"
                                :class="{noCard:item.iska && item.id!==0,color56 : item.select}">
                                <text class="text-xs" v-if="item.id !== 2 && item.id !==3">￥</text>
                                <view class="text-xll">
                                  <text>{{item.id == 3 ? '好友代付' :  pricebelow}}</text>
                                </view>
                                <view class="manjians fkfs-manjian" v-if="item.id == 1">
                                  <text>-30元</text>
                                </view>
                                <text v-if="item.id == 2">次</text>
                              </view>
                              <view>
                                <text class="text-c3 text-df"
                                  :class="{noCard:item.iska && item.id!==0}">{{item.title}}</text>
                                <block v-if="item.id ">
                                  <text class="text-c3 text-df"
                                    :class="{noCard:item.iska && item.id!==0}">{{item.name}}</text>
                                  <text class="text-c9 text-xs margin-left-sm"
                                    :class="{noCard:item.iska && item.id!==0}">{{item.nameTips}}</text>
                                </block>
                              </view>
                            </view>
                            <block v-if="item.id!==0 && item.iska">
                              <view class="text-c9 text-df">暂未发现电子卡</view>
                              <view class="color9700 text-df margin-top-xs">去开卡立减30 <text class="lg  cuIcon-right"></text>
                              </view>
                            </block>
                            <block v-else>
                              <view v-if="item.id == 2" class="text-c6" @click.stop="showCard(item,carSet)">
                                {{moxibustion}}
                                <text class="lg  cuIcon-right rotateStyle" :class="{'active': item.show }"></text>
                              </view>
                              <view v-if="item.id ==1" @click.stop="showCard(item,cardlist)">
                                <view class="text-c6 text-df">
                                  {{ payData}}
                                  <text class="lg  cuIcon-right rotateStyle" :class="{'active': item.show }"></text>
                                </view>
                                <view class="color9700 text-sm margin-top-xs "
                                  @click.stop=" mnavTo('/pages/others/rechargeCard/rechargeCard')" v-if="!item.show">去充值
                                </view>
                              </view>
                              <view v-if="item.id ==3">
                                <text class="lg  cuIcon-right"></text>
                              </view>
                            </block>
                          </view>
                        </block>
                        <block v-else>
                           <view class="text-c3 text-df flex justify-between align-center padding-left-sm" style="height: 70rpx;" :class="{'noCard' : item.id !== 0}">
                             {{item.name}}
                           </view>
                        </block>
                      </view>
                    </view>
                  </view>
                </scroll-view>
              </view>
              
              <view class="flex justify-between bottom-btn" v-if="type !== 'fpa' && type !== '0'&& type !== '2'">
                <view class="cancel-btn text-c9 text-lg flex justify-center align-center">取消订单</view>
                <view class="payment-btn text-white flex justify-center align-center text-lg">
                  继续支付<text class="text-df margin-top-xs margin-left-xs">￥</text><text class="text-50">600.5</text>
                </view>
              </view>
              
          	</view>
          </view>
      </template>
    </slideContent>
    
		<!-- 电子卡 -->
		<payTypeModal ref="payTyperef" @confirm="payConfirm"></payTypeModal>
    
    
	</view>
</template>

<script lang="ts" setup>
	import { ref,onMounted,onUnmounted  } from "vue";
	import { onLoad,onHide,onShareAppMessage} from '@dcloudio/uni-app';
  import { mnavTo, showLoading, hideLoading, getCurRoute, getSystemPhoneX } from '@/utils/helper';
  import slideContent from '@/uni_modules/you-touchbox/components/you-touchbox/you-touchbox.vue' //拖动
  import payTypeModal from "@/components/selePay/selePay.vue" //我的卡
	import mapi from '@/utils/mapi'
  
  const initTop = ref('130')
  const minTopHei = ref('470')
  const maxTopH = ref('70')
  const payTyperef = ref(null)
  const payData = ref('138***2271(¥666.6)')
  const moxibustion = ref('艾灸套卡(剩余10次)')
  const pricebelow = ref(1576)
  const floorClass=ref(0)
	const windowHeight=ref(0)
  const allowSlide = ref(false)
  const noScrBot = ref(true)
  const isMoving = ref(false)
  const type = ref('')
  const sildContRef = ref()
  // 定义倒计时的时间，假设是 1 小时
  const totalTime = ref(30 * 60); // 1小时，单位：秒
  
  // 定义剩余的小时、分钟、秒
  const hours = ref(0);
  const minutes = ref(0);
  const seconds = ref(0);
  
  const room = ref([
    {
      id : 0,
      show : false,
      text:'222房',
      time:'14:00',
      child:[
        {
          title:' 足疗 ',
          num:'1',
        },
        {
          title:' 推拿 ',
          num:'1',
        },
        {
          title:' 斯帕 ',
          num:'1',
        }
      ]
    },
    {
      id : 10,
      show : false,
      text:'222房',
      time:'14:00',
      child:[
        {
          title:' 足疗 ',
          num:'1',
        },
        {
          title:' 推拿 ',
          num:'1',
        },
        {
          title:' 斯帕 ',
          num:'1',
        }
      ]
    },
    {
      id : 1,
      show : false,
      text:'222房',
      time:'14:00',
      child:[
        {
          title:' 足疗 ',
          num:'1',
        },
        {
          title:' 推拿 ',
          num:'1',
        },
        {
          title:' 斯帕 ',
          num:'1',
        }
      ]
    },
    {
      id : 2,
      show : false,
      text:'222房',
      time:'14:00',
      child:[
        {
          title:' 足疗 ',
          num:'1',
        },
        {
          title:' 推拿 ',
          num:'1',
        },
        {
          title:' 斯帕 ',
          num:'1',
        }
      ]
    },
    {
      id : 2,
      show : false,
      text:'222房',
      time:'14:00',
      child:[
        {
          title:' 足疗 ',
          num:'1',
        },
        {
          title:' 推拿 ',
          num:'1',
        },
        {
          title:' 斯帕 ',
          num:'1',
        }
      ]
    }
  ])
  
  const paytype = ref<any>([
    {
      id: 0,
      name: '微信',
      nameTips: '小程序价',
      monery: 1658,
      select: true,
      type: 'wx',
      taoka: []
    },
    {
      id: 1,
      name: '电子卡',
      nameTips: '会员价',
      monery: 1576,
      select: false,
      num: 120,
      iska: false,
      show: false,
      type: 'e-card',
      taoka: [
        {
          id: 0,
          carrnNumberL: '138***2231(¥999.6)',
          balance: 1200,
          select: false,
          available: true, //是否可用
        },
        {
          id: 1,
          carrnNumberL: '138***8271(¥888.6)',
          balance: 50,
          select: false,
          available: true,
        },
        {
          id: 2,
          carrnNumberL: '135***2271(¥446.6)',
          balance: 1600,
          select: false,
          available: true,
        }
      ]
    },
    {
      id: 2,
      name: '套卡',
      monery: 10,
      balance: 10,
      select: false,
      iska: false,
      type: 'card-set',
      taoka: [
        {
          id: 0,
          carrnNumberL: '艾灸10次套卡',
          num: 10,
          selemum: 8,
          select: false,
          available: true,
        },
        {
          id: 1,
          carrnNumberL: '按摩15次套卡',
          num: 15,
          selemum: 10,
          select: false,
          available: true,
        },
        {
          id: 2,
          carrnNumberL: '足浴10次套卡',
          num: 15,
          selemum: 10,
          select: false,
          available: false,
        }
      ]
    },
    {
      id: 3,
      name: '好友代付',
      title:'找家人朋友完成付款'
    }
  ])
  
  const cardlist = ref([
    {
      amount: '10.27',
      card_no: '60983226',
      is_default: '5',
      phone: '19158202779',
      status: '1',
      select: true,
      type: 'card'
    },
    {
      amount: '26270.17',
      card_no: '60983214',
      is_default: '6',
      phone: '19158202779',
      status: '1',
      select: false,
      type: 'card'
    },
    {
      amount: '26280.17',
      card_no: '60983214',
      is_default: '6',
      phone: '19158202779',
      status: '-1',
      select: false,
      type: 'card'
    }
  ])
  const carSet = ref([
    {
      max: '10',
      min: '8',
      card_no: '60983226',
      is_default: '5',
      taoka: '艾灸10次套卡',
      status: '1',
      select: true,
      type: 'cardSet'
    },
    {
      max: '10',
      min: '5',
      card_no: '60983214',
      is_default: '6',
      taoka: '艾灸20次套卡',
      status: '1',
      select: false,
      type: 'cardSet'
    },
    {
      max: '10',
      min: '5',
      card_no: '60983214',
      is_default: '6',
      taoka: '艾灸30次套卡',
      status: '-1',
      select: false,
      type: 'cardSet'
    }
  ])

  onShareAppMessage(() => {
    return new Promise(async (resolve, reject) => {
      let param = {
        event_id: '41' || '', //事件id  1:会员注册, 2:H5分享， 3:商品价格标签, 4:商品超链接分享, 5:拼团， 6:线下团购,7.总部推广 ,8.VIP专属卡,9.预留1,10.预留2
        source_type: '1', //1首页分享，2商品分享，3名片分享，4商品超链接分享5拼团,6线下团购,7.总部推广 ,8.VIP专属卡,9.预留1,10.预留2
        goods_id: '',
        goods_sku: '',
        activity_id: '',
        sell_member_id: '16681', //门店id
        // buy_member_id: paramData.buy_member_id || '', //用户id
      }
      try {
        // let shareId = await takeSaveShare(param)
         let msg = {
           title: ``,
           content: '我正在使用小颐有约，请帮我付个款吧~',
           path: '/pages/order/aptDetails/aptDetails?shareId=110',
           imageUrl: 'https://cdn-static.yekjx.com/resouces/daiyan/xyyy_share.png'
         }
         resolve(msg)
      } catch (e) {
        reject('');
        mapi.msg('分享失败,请稍后重试')
        console.error(e)
        //TODO handle the exception
      }
  
    });
  });
  
	onLoad((options)=>{
    if(options){
      type.value = options.type   
      // #ifdef H5
       initTop.value = '220'
       maxTopH.value = '122'
       minTopHei.value = '380'
      // #endif
      if(options.type == 'fpa' || options.type == '0'){  //'fpa' 好友代付  1
        allowSlide.value = true
        initTop.value = '632'
        console.log( initTop.value,' initTop.value')
      } else if( options.type == '2'){
        allowSlide.value = true
        initTop.value = '600'
      }
    }
    console.log(allowSlide.value)
		const sys:any = uni.getWindowInfo()||{};
		windowHeight.value = sys.windowHeight||0;
	})
  onHide(() => {
  	// if(!noScrBot.value){
  	// setTimeout(() => {
  	// 	sildContRef.value.setBottom('0.9')
  	// 	noScrBot.value = true
  	// }, 500)
  	// }
  })

 const showFn = (item) => {
   item.show = !item.show
 }
  
  // 更新倒计时函数
  const updateCountdown = () => {
    if (totalTime.value > 0) {
      totalTime.value -= 1; // 每秒减少1
      hours.value = padZero(Math.floor(totalTime.value / 3600))
      minutes.value = padZero(Math.floor((totalTime.value % 3600) / 60))
      seconds.value = padZero(totalTime.value % 60)
    } else {
      clearInterval(timerId.value); // 倒计时结束，清除定时器
    }
  };
  //补零
  const padZero = (tiem:any) => {
    return tiem < 10 ? `0${tiem}` : tiem.toString();
  }
  const stopPrevent = () => { }
  // 定时器变量
  const timerId = ref(null) 
  
 const minTopH = ref()
  
  onMounted(() => {
    // 初始化倒计时
    updateCountdown();
    // 每秒更新一次倒计时
    timerId.value = setInterval(updateCountdown, 1000);
    // const systemInfo = uni.getSystemInfoSync();
     
    //  // 获取状态栏高度
    //  const statusBarHeight = systemInfo.statusBarHeight;
     
    //  // 获取导航栏高度
    //  const navigationBarHeight = systemInfo.navigationBarHeight;
       
    //  // 计算去除导航栏和状态栏后的实际可用屏幕高度
    // minTopH.value = systemInfo.screenHeight - statusBarHeight - 600
       
    //  console.log('屏幕高度:', systemInfo.screenHeight);
    //  console.log('状态栏高度:', statusBarHeight);
    //  console.log('可用高度:', minTopH.value);
    
  })
  
  onUnmounted(() => {
    // 清除定时器
    if (timerId.value) {
      clearInterval(timerId.value);
    }
  });
  
  const changeSlide = (e) => {
  	noScrBot.value = !(e.curTop == e.minTop)
  	isMoving.value = false
  	// minTop: this.min,
  	// maxTop: this.max,
  	// curTop: this.top
  }
  const slideAct = () => {
  	isMoving.value = true
  	// if(noScrBot.value){
  	// 	isMoving.value=true
  	// 	console.log("向下滑动")
  	// }else{
  	// 	isMoving.value=true
  	// 	console.log("向上滑动")
  	// }
  
  }
	const	tapFloor=(index:any)=>{
		floorClass.value=index
	}
	const tapGetUp=()=>{
		mapi.msg('呼叫上点')
	}
	const tapwGetUp=()=>{
		mapi.msg('待会上点')
	}
  
  //付款方式
  const selcePay = (item : any, data : any) => {
    if(!pricebelow.value){
      return
    }
    if (item.select) {
      // 如果当前项目已经被选中，则取消选中
      item.select = false;
    } else {
      // 否则，选中当前项目，取消其他项目的选中状态
      data.forEach((it) => {
        it.select = false;
      });
      item.select = true;  // 选中当前项
      if(item.id == 3){
       mnavTo('/pages/order/orderComplete/orderComplete?type=fpa')
      }
      if (item.taoka && item.taoka.length > 0) {
        item.taoka[0].select = true;  // 设置第一个子项的 select 为 true
      }
    }
  
    console.log('付款方式', item.select);
  };
  
  //选择付款方式
  const showCard = (item : any, cardlist : any) => {
    // item.show = !item.show
    paytype.value.forEach(item => {
      item.select = false
    })
    item.select = true
    showPop('payTyperef', cardlist)
  }
  
  const showPop = (source: string, carlist?: any) => {
    switch (source) {
      case 'payTyperef':
        payTyperef.value?.open(carlist);
        break;
      // 可以在这里继续添加其他 case 分支
    }
  }
  
  //选择卡
  const payConfirm = (e) => {
    if (e.copiedItems[0].phone) {
      payData.value = formatCardNo(e.copiedItems[0].phone) + '￥' + '(' + e.copiedItems[0].amount + ')'
    } else {
      moxibustion.value = e.copiedItems[0].taoka + '(' + '剩余' + '(' + e.copiedItems[0].min + ')' + '次' + ')'
      // const moxibustion = ref('艾灸套卡(剩余10次)')
    }
  
    // console.log(payData.value,e.copiedItems[0].phone)
  }
  
  const formatCardNo = (cardNo) => {
    // 提取前三位和后四位，剩余部分用 *** 替换
    if (cardNo && cardNo.length >= 10) {
      return cardNo.slice(0, 3) + '***' + cardNo.slice(-4);
    }
    return cardNo; // 如果卡号不符合要求，返回原卡号
  }
  
  const downFn = () => {
    if (type.value == '1') {
      console.log('查看导航');
      // #ifdef MP-WEIXIN
      sildContRef.value.setBottom('470');
      // #endif
      // #ifdef H5
      sildContRef.value.setBottom('380');
      // #endif
    }
  }
  
</script>

<style lang="scss">
  .posire{
    /* #ifdef MP-WEIXIN */ 
    position: relative;
    /* #endif */
  }
.container{
	&.min{
		.topSec{
			height: 620rpx;
		}
		.mapMain{
			padding-top: 100rpx;
		}
		.floor_box{
			margin-top: 0;
		}
		.mtitle{
			top: 30rpx;
		}
		.botSec{
			height: calc(100vh - 570rpx);
      position: relative;
		}
	}
	
}
.topSec{
	width: 100vw;
	height: 692rpx;
	z-index: 1;
	.mapImgBox,.bgimg{
		width: 100%;
		height: 100%;
		// background: url('https://cdn-static.yekjx.com/subscribe/images/mapbg1.png') no-repeat center/contain;
	}
	.bgimg{
		position: absolute;
		left: 0;
		top: 0;
	}
	.mapMain{
		z-index: 3;
		padding-top: 120rpx;
	}
	.img_vbox{
		min-height: 413rpx;
	}
	.mpimg{
		width: 100%;
		height: 413rpx;
	}
	.floorItm{
		width: 86rpx;
		height: 40rpx;
		border-radius: 40rpx;
		background: #9D9D9C;
		&.act{
			background: #56BF7A;
		}
	}
}
.mtitle{
	position: absolute;
	left: 50%;
	top: 50rpx;
	width: 300rpx;
	height: 60rpx;
	margin-left: -150rpx;
	border-radius: 60rpx;
	background: rgba(0, 0, 0, 0.50);
	box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
  z-index: 100;
}
.botSec{
	min-height: calc(100vh - 652rpx);
	// margin-top: -50rpx;
	// background: palevioletred;
	z-index: 3;
	.bs_top{
		width: 100%;
		height: 336rpx;
		border-radius: 16rpx 16rpx 0px 0px;
		background: #56BF7A;
		box-shadow: 0px 2px 30rpx 15rpx rgba(0, 0, 0, 0.15);
    .fk-w{
      width: calc(100% - 40rpx);
      margin: 0 auto;
    }
	}
	.ico_img{
		width: 62rpx;
		height: 62rpx;
		border-radius: 50%;
	}
	.bs_time{
		padding-left: 84rpx;
	}
	.bsprice{
		font-size: 48rpx;
	}
	.bs_ldis{
		position: absolute;
		top: -15rpx;
		left: 0;
		min-width: 80rpx;
		padding: 0 10rpx;
		height: 28rpx;
		border-radius: 28rpx;
		&.org{
			background: #FF9700;
		}
		&.gry{
			top: -38rpx;
			left: -82rpx;
			background: #999999;
		}
	}
}
.fdis{
	width: 1px;
	height: 36rpx;
}
.bs_list{
	position: absolute;
	left: 20rpx;
	top: 168rpx;
	// height: calc(100% - 160rpx);
	width: calc(100% - 40rpx);
  height: 100%;
	// border-radius: 16rpx 16rpx 0 0;
	// background: #FFF;
	// box-shadow: 0px 2px 18rpx 0px rgba(0, 0, 0, 0.20);
  .top-con{
    border-radius: 16rpx;
    background: #FFF;
    box-shadow: 0px 2px 18rpx 0px rgba(0, 0, 0, 0.20);
    position: relative;
    // height: calc(100% - 380rpx);
     height: calc(100% - 380rpx);
     /* #ifdef H5 */
     height: calc(100% - 480rpx);
     /* #endif */
  }
  &.fpa{
    height: calc(100% - 120rpx);
    border-radius: 16rpx 16rpx 0 0;
    background: #FFF;
    box-shadow: 0px 2px 18rpx 0px rgba(0, 0, 0, 0.20);
  }
	.bslItem{
		width: 100%;
		min-height: 116rpx;
		border-radius: 10rpx;
		border: 1px solid #F3F3FF;
	}
	.bsflr{
		padding: 0 6rpx;
		min-width: 42rpx;
		height: 24rpx;
		border-radius: 24px;
		background: #F3FAF6;
    font-size: 16rpx;
    margin-left: 16rpx;
	}
	.bs_status{
		width: 134rpx;
		height: 46rpx;
		border-radius: 0px 0px 4px 4px;
		background: #FF9700;
	}
	.bsyuan{
		width: 9rpx;
		height: 9rpx;
		border-radius: 50%;
		background: #fff;
	}
}
.bscr_box{
	width: 100%;
	height: calc(100vh - 1006rpx);
  &.bs-height{
    height: calc(100vh - 1150rpx);
  }
  margin-bottom: 30rpx;
  /* #ifdef H5 */
  height: calc(100vh - 1000rpx);
  &.bs-height{
    height: calc(100vh - 1250rpx);
  }
  /* #endif */
  // padding-bottom: 30rpx;
	.bscrv{
		padding-bottom: 150rpx;
	}
}
.bs_btnv{
	// position: absolute;
	// left: 20rpx;
	// bottom: -20rpx;
	width: calc(100% - 40rpx);
	// height: 150rpx;
	.btn_l{
		width: 200rpx;
		height: 80rpx;
		border-radius: 80rpx;
		border: 1px solid #56BF7A;
	}
  .call_r{
    width: 290rpx;
    height: 80rpx;
    border-radius: 80rpx;
    background: #56BF7A;;
  }
	.btn_r{
    width: 288rpx;
    height: 80rpx;
    margin: 0 auto;
    .mdbtn{
      width: 100%;
      height: 100%;
      border-radius: 80rpx;
      background: #56BF7A;
      color: #fff;
    }
	}
  .btn_w{
    width: 500rpx;
    margin: 0 auto;
  }
}
.text-xxs{
  font-size: 16rpx;
}
.textbold400{
  font-weight: 400;
}
.text-llllg{
  font-size: 64rpx;
}
.countdown{
  .tiem-box{
    width: 38rpx;
    height: 38rpx;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #A9F4C3;
    background: #FFF;
    color: #666;
    margin-right: 10rpx;
    margin-left: 10rpx;
   
    &:last-child{
      margin-right: 0;
    }
  }
}

.fkfs-con {
    .fktitle {
      padding: 0 0 20rpx 0;
    }

    .fk-middle {
      .zj-ul {
        padding-top: 20rpx;
        border-bottom: 1px solid #F5F5FD;
        padding-bottom: 20rpx;
        &:last-child{
          border-bottom: none;
        }
      }

      .cardlist {
        border-radius: 16px;
        background: rgba(241, 245, 253, 0.40);

        .available {
          color: #D1D1D1 !important;
        }
      }

      .recharge {
        flex: 1;
        text-align: right;
      }

    }
  }
  .scrollheight {
    // height: 820rpx;//820rpx
    height: calc(100vh - 930rpx); //820rpx
    /* #ifdef H5 */
    height: calc(100vh - 900rpx); //820rpx
    /* #endif */
  }
  .bg-shadou {
    border-radius: 20rpx;
    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: all 5s ease;
  }
  .fkfs-manjian {
    border-radius: 60px 60rpx 60rpx 0px;
    background: #FF9700;
    box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.14);
    width: 70rpx;
    color: #fff;
    padding-left: 10rpx;
    height: 28rpx;
    border: 0.5px solid #FF9700;
    // position: absolute;
    // top: 10rpx;
    // left: 125rpx;
    font-size: 20rpx;
    margin-bottom: 13rpx;
    margin-left: 10rpx;
  }
  .cuIcon-round {
    color: #999;
  }
  
  .cuIcon-roundcheckfill {
    color: #56BF7A;
  }
  .color56 {
    color: #56BF7A;
  }
  
  .color9700 {
    color: #FF9700;
  }
  .rotateClass{
    transform: rotate(90deg);
    display: inline-block;
    transition: all .3s linear;
  
    &.active {
      transform: rotate(-90deg);
      transition: all .3s linear;
    }
  }
  .bottom-btn{
    width: 710rpx;
    height: 90rpx;
    // position: absolute;
    // bottom: 0;
    // left: 50%;
    // transform: translateX(-50%);
    margin: 15rpx auto;
    z-index: 999;
    .cancel-btn{
      width: 260rpx;
      height: 80rpx;
      font-weight: 400;
      border-radius: 100rpx;
      border: 1px solid #999;
    }
    .payment-btn{
      width: 414rpx;
      height: 80rpx;
      border-radius: 100rpx;
      background: #56BF7A;
      .text-50{
        font-size: 50rpx;
      }
    }
  }
  .a-right{
    position: relative;
    .xcxPic{
      position: absolute;
      border-radius: 43px;
      border: 0px solid rgba(255, 255, 255, 0.15);
      background: rgba(153, 153, 153, 0.30);
      width: 75rpx;
      height: 26rpx;
      letter-spacing: 0.16px;
      color: #666;
      font-size:16rpx;
      top: -18rpx;
      right: 10rpx;
      text-align: center;
      line-height: 26rpx;
    }
  }
  .wd100{
    width: 100%;
  }
  .posicuIconunfold{
    position: absolute;
    top: -50rpx;
    right: 150rpx;
    .cuIcon-right{
      color: rgba(153, 153, 153, 0.50);
      font-size: 30rpx;
    }
  }
  .room-hei{
    height: 52rpx;
    .rotateStyleNew{
      transform: rotate(-90deg);
      display: inline-block;
      transition: all .3s linear;
        
      &.active {
        transform: rotate(90deg);
        transition: all .3s linear;
      }
    }
  }
  .rotateStyle {
    transform: rotate(90deg);
    display: inline-block;
    transition: all .3s linear;
  
    &.active {
      transform: rotate(-90deg);
      transition: all .3s linear;
    }
  }
  .li-height{
   // transform-origin: top top;
   overflow: hidden;
   transition: all 0.16s ease-out;
  }
</style>